<template>
    <div id="home">
        <div id="head">
            <img style="height: 56px; width: 144px;" src='../assets/美食地图logo.jpg' @click="gohome()" />
            <div id="headr">
                <el-button type="warning" @click="gorecommend()">找你想吃</el-button>
                <img style="height: 48px; width: 48px;" src='../assets/美食地图logo.jpg' />
                <p>{用户名}</p>
                <el-button icon="ArrowLeftBold" circle @click="out()" />
            </div>
        </div>

        <div id="body">
            <div id="bodyb">
                <div id="recom">
                    <h2>找你想吃</h2>
                    <div id="recomd">
                        <p>请选择你的城市</p>
                        <el-select v-model="value" filterable placeholder="Select" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <div id="tuijian">
                            <div id="tfor" v-for="restaurant in 24" @click="godetails()">
                                <img src="" />
                                <p>{名称} <span>{4.5}</span> </p>
                                <p>{特色菜}
                                    <span style="float: right;color: lightgray;">查看详情
                                        <el-icon>
                                            <ArrowRight />
                                        </el-icon>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <div id="foot">
                <p>这是页面底部</p>
                <p>遵纪守法好公民，代码开源好码农</p>
            </div>
        </div>


    </div>
</template>

<script setup>
import {
    Search,
    CloseBold
} from '@element-plus/icons-vue';
import axios from 'axios';
import {
    ref,
    reactive
} from 'vue';
import {
    useRouter
} from 'vue-router';
import { onMounted } from 'vue';

const router = useRouter()

const value = ref('')
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]

const shopData = ref([]);

onMounted(async () => {
    try {
        // 使用await等待请求完成，拿到完整的响应
        const response = await axios.get(
            "http://localhost:8081/Shop/getPage?pageNum=1&pageSize=24&shopType=1"
        );
        // 假设接口返回的数据结构中，真正有用的数据在data属性下，根据实际情况调整
        shopData.value = response.data.data;
    } catch (e) {
        alert("数据请求失败");
    }
});

function godetails() {
    router.push({
        name: 'Details'
    })
}

function gohome() {
    router.push({
        name: 'Home'
    })
}

function gorecommend() {
    router.push({
        name: 'Recommend'
    })
}

function out() {
    router.push({
        name: 'Login'
    })
}
</script>

<style scoped>
#home {
    height: 100vh;
    width: 100vw;
    background: url('../assets/美食地图.jpg') no-repeat;
    background-size: cover;
    /* display: flex; */
    justify-content: center;
    align-items: center;

    #head {
        position: fixed;
        top: 0;
        height: 64px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        justify-content: space-between;
        display: flex;
        box-shadow: 0px 2px 2px gray;
        z-index: 1000;

        img {
            padding: 4px;
            border-radius: 10px;
            cursor: pointer;
        }

        #headr {
            height: 100%;
            width: 360px;
            display: flex;
            align-items: center;

            * {
                display: inline-block;
            }

            img {
                border-radius: 50%;
                padding: 0 16px;
            }

            p {
                width: 128px;
                overflow: hidden;
                padding: 0 16px;
            }
        }
    }

    #body {
        width: 100%;
        height: 100%;
        overflow: auto;

        * {
            margin: 0 auto;
        }

        #bodyb {
            width: 1120px;
            padding: 0 40px 40px;
            background-color: rgba(255, 255, 255, 0.25);

            #recom {
                margin-top: 80px;

                h2 {
                    width: 1120px;
                    line-height: 80px;
                    font-size: 64px;
                    font-weight: 900;
                    font-family: cursive;
                    margin-top: 100px;
                }

                #recomd {
                    padding: 20px;

                    #tuijian {
                        width: 1080px;
                        height: 640px;
                        overflow: auto;
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr 1fr;
                        grid-gap: 20px 20px;
                        margin: 40px 0;

                        #tfor {
                            width: 100%;
                            height: 300px;
                            border-radius: 10px;
                            background-color: white;
                            overflow: hidden;
                            cursor: pointer;

                            img {
                                width: 100%;
                                height: 200px;
                            }

                            p {
                                padding: 8px 0;
                            }

                            p:nth-of-type(1) {
                                font-size: 24px;
                            }
                        }

                        #tfor:hover {
                            border-bottom: solid 1px rgba(255, 255, 255, 0.1);
                        }
                    }
                }

            }
        }
    }

    #foot {
        width: 100%;
        height: 160px;
        background-color: lightblue;
        box-shadow: 0px -2px 2px lightblue;

        p {
            text-align: center;
        }

        p:nth-of-type(1) {
            line-height: 128px;
            font-size: 32px;
        }

        p:nth-of-type(2) {
            line-height: 32px;
            font-size: 16px;
            font-family: cursive;
            background-color: white;
        }
    }
}
</style>